<template>
	<div class="session-wrapper">
		<div class="container">
			<div class="session_body">
				<div class="session-sidebox">
					<div class="session-sidebox_container">
						<div class="session-sidebox-header">
							<div class="session-sidebox_logo">
								<img src="../../assets/img/HLlogo.png" alt="logo" />
							</div>
							<h2 class="session-sidebox_subtitle">化工设备数字化设计工作平台</h2>
						</div>
						<div class="session-sidebox_content">
							<div class="session-sidebox-content_container">
								<div class="session-sidebox-comments_header">
									<span class="session-sidebox-comments_position">华陆科技设备室</span>
								</div>
								<div class="session-sidebox-comments_content">
									化工设备数字化设计工作平台用于非标设备三维数字化设计、建模、校对、进度管理和数据分析等工作，旨在推进设备室数字化建设，欢迎提出宝贵意见和建议！
								</div>
							</div>
						</div>
						<div class="session-sidebox_footer">
							<a target="_blank" href="http://10.6.100.80:8080/#/CommonLink"
								><strong class="session-sidebox__icon-hot">技术支持</strong>
								<span class="session-sidebox__divider">-</span>
								数字化工程中心
							</a>
							<div class="dec_logo">
								<img class="dec_QRCode" src="../../assets/img/dec_QRCode.gif" alt="declogo" />
							</div>
						</div>
					</div>
				</div>
				<div class="session-form">
					<div class="session-form_container">
						<el-form :model="loginForm" status-icon :rules="loginRule" ref="loginFormRed" class="demo-ruleForm">
							<h2 class="session-form-container_header">登录</h2>
							<el-form-item prop="userName">
								<el-input style="width: 340px" type="text" v-model="loginForm.userName" placeholder="请输入用户名"></el-input>
							</el-form-item>
							<el-form-item prop="password">
								<el-input style="width: 340px" type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
							</el-form-item>

							<el-form-item>
								<el-button style="width: 340px" type="warning" @click="userLogin(loginFormRed)">登 录</el-button>
							</el-form-item>
						</el-form>

						<div class="session-form_footer">
							<img class="equiplogo" src="../../assets/img/equiplogo.png" alt="equiplogo" />
							<img class="declogo" src="../../assets/img/hualudec.png" alt="declogo" />
						</div>
					</div>
				</div>
			</div>
			<div class="session_footer"></div>
		</div>
	</div>
</template>

<script setup name="loginIndex">
	import {useRoute, useRouter} from 'vue-router'
	import {formatAxis} from '/@/utils/formatTime'
	import {defineAsyncComponent, onMounted, reactive, computed, ref} from 'vue'
	import {storeToRefs} from 'pinia'
	import {useThemeConfig} from '/@/stores/themeConfig'
	import {NextLoading} from '/@/utils/loading'
	import logoMini from '/@/assets/logo-mini.svg'
	import loginMain from '/@/assets/login-main.svg'
	import loginBg from '/@/assets/login-bg.svg'
	import {initFrontEndControlRoutes} from '/@/router/frontEnd'
	import {initBackEndControlRoutes} from '/@/router/backEnd'
	import {getAllPro} from '/@/api/projectManage/projectList'
	import {HLDECValidationnew, GetUserMaxPermissionV2} from '../../api/login/login.js'
	import {ElMessage} from 'element-plus'
	// 引入组件
	const Account = defineAsyncComponent(() => import('/@/views/login/component/account.vue'))
	const Mobile = defineAsyncComponent(() => import('/@/views/login/component/mobile.vue'))
	const Scan = defineAsyncComponent(() => import('/@/views/login/component/scan.vue'))
	const route = useRoute()
	const router = useRouter()
	let loginFormRed = ref('')
	// 定义变量内容
	const storesThemeConfig = useThemeConfig()
	const {themeConfig} = storeToRefs(storesThemeConfig)
	const state = reactive({
		tabsActiveName: 'account',
		isScan: false,
		loading: {
			signIn: false,
		},
		isShowPassword: false,
	})

	let loginForm = reactive({
		userName: '',
		password: '',
		platform: 'equipdesign',
	})

	let loginRule = reactive({
		userName: [{required: true, required: true, message: '请输入用户', trigger: 'blur'}],
		password: [{required: true, message: '请输入密码', trigger: 'blur'}],
	})

	let userLogin = async formEl => {
		if (!formEl) return
		await formEl.validate(async valid => {
			if (valid) {
				let obj = {
					userName: loginForm.userName,
					password: loginForm.password,
					platform: 'equipdesign',
				}
				var input = new FormData()

				input.append('input', JSON.stringify(obj))
				let res = await HLDECValidationnew(input)
				if (res.isAccountValid) {
					let ProData = await getAllPro({
						user_token: res.accountInfor.user_token,
					})
					localStorage.setItem('token', res.accountInfor.user_token)
					localStorage.setItem('refrushProId', ProData[0].proj_oid)
					let resUser = await GetUserMaxPermissionV2({
						proj_oid: ProData[0].proj_oid,
						user_token: res.accountInfor.user_token,
					})
					localStorage.setItem('userMessage', JSON.stringify(resUser))
					localStorage.setItem('authCode', resUser.maxPermission)
					console.log(resUser)
					if (Object.keys(resUser).length > 0) {
						if (resUser.roles.length == 0) {
							ElMessage.warning('抱歉，您还没有注册成为此系统用户')
							Session.clear()
							return
						} else {
							if (!themeConfig.value.isRequestRoutes) {
								// 前端控制路由，2、请注意执行顺序
								const isNoPower = await initFrontEndControlRoutes()
								signInSuccess(isNoPower)
							} else {
								// 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
								// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
								const isNoPower = await initBackEndControlRoutes()
								// 执行完 initBackEndControlRoutes，再执行 signInSuccess
								signInSuccess(isNoPower)
							}
						}
					}
				} else {
					ElMessage({
						message: '账号或密码错误',
						type: 'error',
					})
				}
			}
		})
	}

	// 获取布局配置信息
	const getThemeConfig = computed(() => {
		console.log(themeConfig.value)
		return themeConfig.value
	})
	// 页面加载时
	onMounted(() => {
		document.onkeydown = function (e) {
			if (e.keyCode == 13) {
				userLogin(loginFormRed.value)
			}
		}

		NextLoading.done()
	})

	const currentTime = computed(() => {
		return formatAxis(new Date())
	})

	const signInSuccess = isNoPower => {
		if (isNoPower) {
			ElMessage.warning('抱歉，您没有登录权限')
			Session.clear()
		} else {
			// 初始化登录成功时间问候语
			let currentTimeInfo = currentTime.value
			// 登录成功，跳到转首页
			// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
			if (route.query?.redirect) {
				router.push({
					path: route.query?.redirect,
					query: Object.keys(route.query?.params).length > 0 ? JSON.parse(route.query?.params) : '',
				})
			} else {
				router.push({path: '/home'})
			}

			router.push({path: '/home'})
			// 登录成功提示

			ElMessage.success(`登录成功`)
			// 添加 loading，防止第一次进入界面时出现短暂空白
			NextLoading.start()
		}
		state.loading.signIn = false
	}
</script>

<style scoped lang="scss">
	.declogo {
		width: 58px;
		margin-right: 90px;
	}

	.equiplogo {
		width: 85px;
		margin-left: 90px;
		padding: 5px 0;
	}

	.dec_QRCode {
		width: 60px;
		margin-left: 5px;
	}
	h2 {
		font-size: 1.5rem;
		margin-bottom: 24px;
	}

	.el-button {
		margin-top: 10px;
		font-size: 1.2rem;
		box-sizing: border-box;
	}

	.session-sidebox_logo img {
		width: 300px;
	}

	.session-wrapper {
		min-width: 1040px;
		min-height: 99.9vh;
		position: relative;
	}

	.session-wrapper:before {
		width: 394px;
		height: 468px;
		background: url('../../assets/img/3.webp');
		left: 0;
	}

	.session-wrapper:after {
		width: 487px;
		height: 412px;
		background: url('../../assets/img/4.webp');
		right: 0;
	}

	.session-wrapper:before,
	.session-wrapper:after {
		content: '';
		position: fixed;
		bottom: 0;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.container {
		margin-top: 200px;
		top: 0;
		left: 50%;
		transform: translate(-50%, 0);
		position: absolute;
		width: 1000px;
		padding: 0;
		z-index: 1;
	}

	.session-sidebox {
		color: #fff;
		position: relative;
		padding: 65px 80px 48px;
		background: linear-gradient(0deg, #3a485a 0%, #607089 100%);
	}

	.session-sidebox::before {
		background: url('../../assets/img/1.webp') no-repeat 0 0;
	}
	.session-sidebox::after {
		background: url('../../assets/img/2.webp') no-repeat right bottom;
	}

	.session-sidebox::before,
	.session-sidebox::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
	.session-sidebox_container {
		position: relative;
		z-index: 1;
		height: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	.session-sidebox_subtitle {
		font-weight: normal;
		margin-top: 20px;
	}

	.session-sidebox_content {
		flex: 1;
	}

	.session-sidebox-content_container {
		color: #fff;
		font-size: 14px;
	}

	.session-sidebox-comments_header {
		opacity: 0.5;
	}

	.session-sidebox-comments_content {
		margin-top: 16px;
		line-height: 1.71429;
	}

	.session-sidebox_footer {
		font-size: 14px;
		padding-top: 20px;
		margin-top: 24px;
		border-top: 1px solid rgba(255, 255, 255, 0.2);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.session-sidebox_footer a {
		color: white;
	}
	a {
		text-decoration: none;
		cursor: pointer;
		color: #005980;
	}

	.session_body {
		display: flex;
		margin: auto;
		width: inherit;
		position: relative;
		box-shadow: 0px 20px 80px 0px rgb(0 0 0 / 30%);
	}

	.session_body:before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		overflow: hidden;
		background: #fff;
		z-index: -1;
	}

	.session-sidebox,
	.session-form {
		margin: 0 auto;
		width: 50%;
		min-height: 400px;
		box-sizing: border-box;
	}

	.session-form_container {
		height: 100%;
		padding: 65px 80px 48px;
		position: relative;
	}

	.session-form_footer {
		width: 100%;
		display: flex;
		justify-content: space-around;
		border-top: 1px solid #ddd;
		padding-top: 20px;
		margin-top: 15px;
	}

	*,
	*:before,
	*:after {
		-webkit-box-sizing: inherit;
		box-sizing: inherit;
	}

	.login-container {
		height: 100%;
		background: var(--el-color-white);
		.login-left {
			flex: 1;
			position: relative;
			background-color: rgba(211, 239, 255, 1);
			margin-right: 100px;
			.login-left-logo {
				display: flex;
				align-items: center;
				position: absolute;
				top: 50px;
				left: 80px;
				z-index: 1;
				animation: logoAnimation 0.3s ease;
				img {
					width: 52px;
					height: 52px;
				}
				.login-left-logo-text {
					display: flex;
					flex-direction: column;
					span {
						margin-left: 10px;
						font-size: 28px;
						color: #26a59a;
					}
					.login-left-logo-text-msg {
						font-size: 12px;
						color: #32a99e;
					}
				}
			}
			.login-left-img {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 100%;
				height: 52%;
				img {
					width: 100%;
					height: 100%;
					animation: error-num 0.6s ease;
				}
			}
			.login-left-waves {
				position: absolute;
				top: 0;
				right: -100px;
			}
		}
		.login-right {
			width: 700px;
			.login-right-warp {
				border: 1px solid var(--el-color-primary-light-3);
				border-radius: 3px;
				width: 500px;
				height: 500px;
				position: relative;
				overflow: hidden;
				background-color: var(--el-color-white);
				.login-right-warp-one,
				.login-right-warp-two {
					position: absolute;
					display: block;
					width: inherit;
					height: inherit;
					&::before,
					&::after {
						content: '';
						position: absolute;
						z-index: 1;
					}
				}
				.login-right-warp-one {
					&::before {
						filter: hue-rotate(0deg);
						top: 0px;
						left: 0;
						width: 100%;
						height: 3px;
						background: linear-gradient(90deg, transparent, var(--el-color-primary));
						animation: loginLeft 3s linear infinite;
					}
					&::after {
						filter: hue-rotate(60deg);
						top: -100%;
						right: 2px;
						width: 3px;
						height: 100%;
						background: linear-gradient(180deg, transparent, var(--el-color-primary));
						animation: loginTop 3s linear infinite;
						animation-delay: 0.7s;
					}
				}
				.login-right-warp-two {
					&::before {
						filter: hue-rotate(120deg);
						bottom: 2px;
						right: -100%;
						width: 100%;
						height: 3px;
						background: linear-gradient(270deg, transparent, var(--el-color-primary));
						animation: loginRight 3s linear infinite;
						animation-delay: 1.4s;
					}
					&::after {
						filter: hue-rotate(300deg);
						bottom: -100%;
						left: 0px;
						width: 3px;
						height: 100%;
						background: linear-gradient(360deg, transparent, var(--el-color-primary));
						animation: loginBottom 3s linear infinite;
						animation-delay: 2.1s;
					}
				}
				.login-right-warp-mian {
					display: flex;
					flex-direction: column;
					height: 100%;
					.login-right-warp-main-title {
						height: 130px;
						line-height: 130px;
						font-size: 27px;
						text-align: center;
						letter-spacing: 3px;
						animation: logoAnimation 0.3s ease;
						animation-delay: 0.3s;
						color: var(--el-text-color-primary);
					}
					.login-right-warp-main-form {
						flex: 1;
						padding: 0 50px 50px;
						.login-content-main-sacn {
							position: absolute;
							top: 0;
							right: 0;
							width: 50px;
							height: 50px;
							overflow: hidden;
							cursor: pointer;
							transition: all ease 0.3s;
							color: var(--el-color-primary);
							&-delta {
								position: absolute;
								width: 35px;
								height: 70px;
								z-index: 2;
								top: 2px;
								right: 21px;
								background: var(--el-color-white);
								transform: rotate(-45deg);
							}
							&:hover {
								opacity: 1;
								transition: all ease 0.3s;
								color: var(--el-color-primary) !important;
							}
							i {
								width: 47px;
								height: 50px;
								display: inline-block;
								font-size: 48px;
								position: absolute;
								right: 1px;
								top: 0px;
							}
						}
					}
				}
			}
		}
	}
</style>
